<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue2set与delete方法</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="box">
        <!-- {{myname.substring(0,1).toUpperCase()+myname.substring(1)}} -->
        <div>
            计算属性-{{myComputedName}} 
        </div>
        <div>
            方法表达式-{{myMethodName()}}
        </div>
    </div>
    <script>
        let obj={
            data(){
                return{
                    myname:'amyname'
                }
            },
            methods: {  //方法表达式,注意方法调用要加小括号
                // 方法没有缓存,依赖修改后,会将基于依赖的值都重新计算一遍
                myMethodName(){ 
                    return '张三'
                },
            },
            computed:{      //计算属性   计算之后的一个属性,注意不是方法,不要加小括号
                // 基于依赖修改之后,重新计算一遍,并将计算结果添加到缓存中,只有当依赖再次修改时,才会重新运算,否则直接读取缓存
                myComputedName(){  // 会将return的结果返回到页面上
                    return this.myname.substring(0,1).toUpperCase()+this.myname.substring(1);  
                }
            },
            //计算属性和双大括号中直接写函数表达式有什么区别
            //都可以把一段复杂的js逻辑运算完的结果输出到页面中,解决模版臃肿难以维护的问题
            //computed计算属性的结果会被换缓存,方法的结果没有缓存
        }
        let app=Vue.createApp(obj).mount("#box")
    </script>
</body>
</html>